<template>
	<div class="grid-layout-container">
		<el-card class="box-card">
			<section class="px10" style="display:flex;justify-content:space-around">
				<div style="height:100px" v-for="(item, index) in state.data" :key="index">
					<div class="personal-recommend">
						<el-image style="width: 80px; height: 80px" :src="item.iconUrl" />
						<div class="font16">{{ item.name }} </div>
					</div>
				</div>
			</section>
		</el-card>
	</div>
</template>


<script setup lang="ts" name="funGridLayout">
import srtj from '/@/assets/images/srtj.png?url';
import sptj from '/@/assets/images/sptj.png?url';
import kxtj from '/@/assets/images/kxtj.png?url';
import hdgl from '/@/assets/images/hdgl.png?url';
import czgl from '/@/assets/images/czgl.png?url';
import djqgl from '/@/assets/images/djqgl.png?url';
import hytj from '/@/assets/images/hytj.png?url';
import kccx from '/@/assets/images/kccx.png?url';
import dxqf from '/@/assets/images/dxqf.png?url';
import { reactive, onMounted } from 'vue';
const state = reactive({
	status: 1,
	data: [
		{ name: '收入统计', iconUrl: srtj },
		{ name: '商品统计', iconUrl: sptj },
		{ name: '卡项统计', iconUrl: kxtj },
		{ name: '活动管理', iconUrl: hdgl },
		{ name: '充值管理', iconUrl: czgl },
		{ name: '代金券管理', iconUrl: djqgl },
		{ name: '会员统计', iconUrl: hytj },
		{ name: '库存查询', iconUrl: kccx },
		{ name: '短信群发', iconUrl: dxqf },
	]
});
// 页面加载时
onMounted(() => {
});
</script>
<style scoped lang="scss">
.grid-layout-container {
	.box-card :deep(.el-card__header) {
		padding: 10px 10px !important;
	}

	.box-card :deep(.el-card__body) {}

	.box-card :deep(.el-card__body) {
		padding: 0px !important;
	}

	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;

		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
}

.personal-recommend {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>